import React from 'react';
import style from './style.styl';
import cx from 'classnames';
import util from '../../../../util';
import {IconFont,Button,Input,Modal,success} from '../../../../ui-components';

class ReviewAdminItem extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ReviewAdminItem';
    this.state={
      cancelReviewActivity: false,
    }
  }
  checkReview = () => {
    this.context.router.push(`/review/index/${this.props.item.templateId}`)
  }
  render() {
    const {
      item,
      report,
      peer,
    } = this.props;
    const {
      startTime: startTimeStamp,
      endTime: endTimeStamp,
      selfReviewDeadline: selfReviewDeadlineStamp,
      peerReviewDeadline: peerReviewDeadlineStamp,
      publicDeadline: publicDeadlineStamp,
      publishedTime: publishedTimeStamp,
      state,
      questions,
      templateName,
      invitedTeamVOs = [],
      isReviewerAnonymous,
      revieweeProfileList = [],
    } = item;
    const now = Date.now();
    const startTime = util.time(+startTimeStamp);
    const endTime = util.time(+endTimeStamp);
    const selfReviewDeadline = util.time(+selfReviewDeadlineStamp);
    const peerReviewDeadline = util.time(+peerReviewDeadlineStamp);
    const publishedTime = util.time(+publishedTimeStamp);
    const publicDeadline = util.time(+publicDeadlineStamp);
    const itemState = state === 2 && now > publicDeadlineStamp ? 3 : state;
    const indexFlag = itemState === 1 ? 0 :
      now > publicDeadlineStamp ? 4 : 
      now > peerReviewDeadlineStamp ? 3 : 
      now > selfReviewDeadlineStamp ? 2 : 
      now > publishedTimeStamp ? 1 : 0;
    let linePercent = indexFlag * 33 - 16.5;
    return (
      <div className={cx({
        [style['page']]: true,
        [style['admin-item']]: true,
        [style['admin-home']]: true,
      })}>
        <div className={style['admin-title']}>
          {
            peer && revieweeProfileList?
            revieweeProfileList.slice(0,3).map(v => v.fullName).join('、') + `${revieweeProfileList.length > 3 ? '等同事' : ''}在`
            : null
          }{`“${templateName}”`+`${peer ? '中邀请您对他反馈' : '正在进行'}`}
        </div>
        <div className={style['admin-btn-area']}>
          <Button label={'点击前往'} blueLine onClick={this.checkReview} />
        </div>
        <div className={style['admin-info']}>
          <span>{`对应工作时间：${startTime}~${endTime}`}</span>
          <span>{peer ? '仅受邀' : `参与部门：${invitedTeamVOs.map(v => v && v.teamName).join('，')}`}</span>
          <span>{`类型：${isReviewerAnonymous ? '匿名反馈' : '实名反馈'}`}</span>
        </div>
        {
          peer ? null :
          <div style={{overflow: 'hidden'}}>
            <div className={style['admin-line']}>
              <div className={style['admin-line-layout']}>
                <div className={cx({
                  [style['admin-line-item']]: true,
                  [style['active']]: indexFlag > 0,
                  [style['current']]: indexFlag === 1,
                })}>
                  <p>发起</p>
                  <aside>{publishedTime}</aside>
                </div>
                <div className={cx({
                  [style['admin-line-item']]: true,
                  [style['active']]: indexFlag > 1,
                  [style['current']]: indexFlag === 2,
                })}>
                  <p>自评截止</p>
                  <aside>{selfReviewDeadline}</aside>
                </div>
                <div className={cx({
                  [style['admin-line-item']]: true,
                  [style['active']]: indexFlag > 2,
                  [style['current']]: indexFlag === 3,
                })}>
                  <p>同事反馈截止</p>
                  <aside>{peerReviewDeadline}</aside>
                </div>
                <div className={cx({
                  [style['admin-line-item']]: true,
                  [style['active']]: indexFlag > 3,
                  [style['current']]: indexFlag === 4,
                })}>
                  <p>流程结束</p>
                  <aside>{publicDeadline}</aside>
                </div>
                <div className={style['admin-line-time']} style={{width: `${linePercent}%`}}></div>
              </div>
            </div>
          </div>
        }
      </div>
    );
  }
}

export default ReviewAdminItem;
